<template>
    <div class="app">
        <div class="comment">
            <div class="comment-title">
                <h3>提交评论</h3>
            </div>
            <div class="comment-content">
                 <textarea ref="postcontent" class="textarea" placeholder="请输入评论内容"></textarea>
                 <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
            </div>
        </div>
        <div class="comment-list">
            <div class="comment-list-title">
                <h3>评论列表</h3>
                <ul class="comment-list-list">
                    <li v-for="item in commentList">
                        <div>{{item.content}}</div>
                        <div>
                            <span>{{item.user_name}}</span>
                            <span>{{item.add_time |fmtdate('YYYY-MM-DD HH:mm:ss')}}</span>
                        </div>
                    </li>
                </ul>
            </div>     
        </div>
         <!--加载跟多按钮-->
        <mt-button class="more" type="danger" size="large" plain @click="getmore" v-show="isShow">加载更多</mt-button>
    </div>
</template>

<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui'; //导入mint-ui中的提示组件
    export default{
        created(){
            //在页面加载之后获得评论的内容
            this.getcomment(this.pageindex);
        },
        data(){
            return {
                isShow:true,
                pageindex:1,
                commentList:[]
            }
        },
        methods:{
            //提交用户传过来的数据
            postcomment:function() {
              //提交数据
              var that =this;
                let value = this.$refs.postcontent.value;
                //如果当前没有内容并如果为空，那么就提示用户
                if(!value || value.trim().length===0){
                     Toast('请填写内容');
                     return;
                }
                let url = common.apihost + '/api/postcomment/'+this.artid;
                this.$http.post(url,{content:value},{emulateJSON:true}).then(res=>{
                    Toast('数据提交成功');
                    //清空文本的数据
                    this.$refs.postcontent.value = "";
                      this.getcomment(this.pageindex,value);   
                })
                 
                
                
            },
            //用来获得数据，获得评论的数据
            getcomment(pageindex,value){
                let url = common.apihost+'/api/getcomments/'+this.artid+'?pageindex='+this.pageindex;
                this.$http.get(url).then(res=>{
                    if(res.body.status!==0){
                        Toast(res.body.message);
                        return;
                    }

                    //通过控制加载的按钮
                    this.isShow = res.body.message.length==0 ? false:true;
                    
                    // this.commentList=[];
                    //通过判断当前用户的是不是第一次请求数据来添加数据
                    if(!this.commentList){
                       return this.commentList = res.body.message;
                    }else{
                        if(pageindex>1){
                            this.commentList = value?this.commentList.push(value):this.commentList.concat(res.body.message);
                            
                        }else{
                            this.commentList = res.body.message.concat(this.commentList); 
                        }
                             
                    }
                       
                },res=>{
                    console.log("数据获取失败");
                })
            },
            //点击获得更多的数据
            getmore(){
                this.pageindex++;
                this.getcomment(this.pageindex);
            }
        },
        props:['artid']
    }

</script>

<style scoped>
    .textarea{
        height:60px;
    }
    .comment-title h3,.comment-list-title h3 {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size:20px;
        text-align: left;
        font-family: "微软雅黑";
    }
    .comment-list-title h3 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
    }
    .comment-list-title ul li{
       /* line-height: 100px;*/
        height:50px;
        text-align: left;
        padding:5px 0px;
        border-bottom: 1px solid #eee;
    }
    .comment-list-list div span:nth-of-type(1){
        float: left;
    }
    .comment-list-list div span:nth-of-type(2){
        float: right;
    }
</style>